<template>
    <codemirror ref="codeEdit"   class="code" v-model="showCode" :options="cmOptions"></codemirror>
</template>
 
<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import 'codemirror/theme/idea.css'
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
 
import "codemirror/theme/railscasts.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/hint/anyword-hint.js";

 
export default {
    components: {
        codemirror
    },
    props:{
        code:String,
        // edit:Boolean
    },
    watch:{
        code(){
            this.showCode =this.code
        },
        showCode(){
             this.checkValid();
        }
    },
    computed:{
        myCm(){
            return  this.$refs.codeEdit.codemirror
        }
    },

    data() {
        return {
            // 代码
            showCode:'',
            cmOptions: {
                tabSize: 4,// tab的空格个数
                theme: 'idea',//主题样式
                lineNumbers: true,//是否显示行数
                lineWrapping: false, //是否自动换行
                styleActiveLine: true,//line选择是是否加亮
                matchBrackets: true,//括号匹配
                mode: "text/java", //实现javascript代码高亮
                readOnly: 'false' ,//只读
 gutters: ['CodeMirror-linenumbers', 'CodeMirror-lint-markers']
         
            }
        }
    },
    created(){
        this.showCode= this.code;
       
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            this.myCm.on("cursorActivity",(codemiior)=>{
                console.log(codemiior.getCursor())
                var pos =codemiior.getCursor()
                console.log( pos.line+' : '+this.myCm.getLine(pos.line))
                var linevalue = this.myCm.getLine(pos.line);
                var param = linevalue.indexOf("=")>-1?"true":false
                console.log(param + ":" + linevalue.split("=")[0])
            });
            this.myCm.on("blur",()=>{
                // var currentCode =this.showCode
                this.$emit("currentCode",this.showCode) 
            });


        },
        editCode(){
            // console.log(this.code)
            console.log(this.cmOptions.readOnly)
             var a = this.cmOptions.readOnly ;
             this.cmOptions.readOnly =!a; 
        },
        checkValid(){
             console.log(this.myCm.getCursor())
             console.log(this.myCm.getLineNumber("t"))
             console.log(this.myCm.getSelection())
             var pos = this.myCm.getCursor()
            //  let tmp = {
            //      line:pos.line,
            //      ch:0
            //  }
            //  let tmp2 = {
            //      line:pos.line,
            //      ch:pos.ch
            //  }
            //  var val =  this.myCm.getRange(tmp,tmp2)
            console.log( pos.line+' : '+this.myCm.getLine(pos.line))
         },

         


    }
}
</script>
 <style scoped>
   .code {
       height: 100%;
       width: 100%;
   }
 </style>
